<template>
    <div class="box">
        <h3>样式穿透</h3>
        <ul>
            <li>每个组件的hashCode值都是唯一的，所以局部组件样式不会被其他组件共享</li>
            <li>当前组件的内部所有的标签都会被增加hashCode编码，而子组件标签的hansCode编码会传递到组件内部的根标签上</li>
            <li>scoped描述的选择器，默认会在末尾基于当前文件的hashCode编码构成属性选择器，实例类似的局部效果</li>
            <li>所有子组件标签上定义的父组件样式，可以直接为子组件根元素实现局部样式加载</li>
            <li> 
                vue-loader 提供样式编译关键字 :deep(穿透选择器) ，用于手动设置hashCode属性选择器的出现位置 <br>
                例如 <br>
                    .box > .item{} => .box > .item[data-v-hashCode]{}<br>
                    .box > :deep(.item){} => .box[data-v-hashCode] > .item{}<br>
                <div style="background-color: #dedede;padding: 10px; color: brown;">
                被废弃的样式穿透关键字：>>> ::v-deep /deep/  <br><br>
                >>>例如 <br>
                    .box > .item{} => .box > .item[data-v-hashCode]{}<br>
                    .box >>> > .item{} => .box[data-v-hashCode] > .item{}<br><br>
                ::v-deep例如 <br>
                    .box > .item{} => .box > .item[data-v-hashCode]{}<br>
                    .box::v-deep > .item{} => .box[data-v-hashCode] > .item{}<br><br>
                /deep/例如 <br>
                    .box > .item{} => .box > .item[data-v-hashCode]{}<br>
                    .box/deep/ > .item{} => .box[data-v-hashCode] > .item{}<br><br>
                </div>
            </li>
        </ul>
        <DeepChild class="test" style="background-color: #dedede;" ></DeepChild>
        <DeepChild class="box-item" ></DeepChild>
    </div>
</template>

<script>
import DeepChild from "./components/DeepChild.vue";
export default {
    components: {
        DeepChild,
    },
}
</script>

<style scoped>
.test>:deep(h5){
    color: blue;
}
.box-item{
    background-color: pink;
}
.box-item>:deep(h5){
    color: red;
}
/* .box-item::v-deep > h5{
    color: red;
} */
</style>